<template>
  <div>
    <el-form-item label="按钮名称">
      <el-input v-model="activeData.content" placeholder="请输入按钮文案" />
    </el-form-item>
    <el-form-item label="按钮功能">
      <el-select
        style="width: 100%"
        v-model="activeData.config['buttonFunction']"
        @change="clearInput"
        placeholder="请选择"
      >
        <el-option label="跳转链接" value="drop" />
        <el-option label="电话拨号" value="call" />
      </el-select>
      <el-input style="margin-top: 5px" v-model="activeData.functionText" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="前图标">
      <el-input v-model="activeData['icon']" placeholder="请输入前图标名称">
        <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('icon')"> 选择 </el-button>
      </el-input>
    </el-form-item>
    <el-form-item label="排列方式">
      <el-radio-group v-model="activeData['arrange']" size="mini">
        <el-radio-button label="left"> 靠左</el-radio-button>
        <el-radio-button label="center"> 居中</el-radio-button>
        <el-radio-button label="right"> 靠右</el-radio-button>
      </el-radio-group>
    </el-form-item>
    <!--    <el-form-item label="宽度占比">-->
    <!--      <el-input-number v-model="activeData.config['width']" label="宽度占比" :min="20" :max="100" :step="10" />-->
    <!--    </el-form-item>-->
    <icons-dialog :current="activeData[icon]" :visible.sync="iconsVisible" @select="setIcon" />
  </div>
</template>

<script>
import IconsDialog from '../IconsDialog'

export default {
  name: 'ConfigItemButton',
  props: ['activeData'],
  components: {
    IconsDialog
  },
  data() {
    return {
      icon: null,
      iconsVisible: false
    }
  },
  methods: {
    openIconsDialog(model) {
      this.iconsVisible = true
      this.icon = model
    },
    setIcon(val) {
      this.activeData[this.icon] = val
    },
    clearInput() {
      // 清空文本框的值
      this.activeData.functionText = ''
    }
  }
}
</script>

<style lang="scss" scoped></style>
